<template>
  <el-form style="padding: 37px 80px 0">
    <el-form-item label="收货人姓名：" :label-width="'100px'">
      <el-input v-model="form.name" auto-complete="off" ></el-input>
    </el-form-item>
    <el-form-item label="收货地址：" :label-width="'100px'">
      <el-select
        v-model="value1"
        placeholder="选择省份"
        @change="handleChange1"
        style="width:120px;"
      >
        <el-option
          v-for="item in options1"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select
        v-model="value2"
        placeholder="选择城市"
        @change="handleChange2"
        style="width:120px;"
      >
        <el-option
          v-for="item in options2"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select
        v-model="value3"
        placeholder="选择区县"
        @change="handleChange3"
        style="width:120px;"
      >
        <el-option
          v-for="item in options3"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="详细地址：" :label-width="'100px'">
      <el-input v-model="form.address" auto-complete="off" ></el-input>
    </el-form-item>
    <el-form-item label="联系电话：" :label-width="'100px'">
      <el-input v-model="form.phone_no" auto-complete="off" ></el-input>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="form.is_default" @change="changeAddrDefault" style="margin-right: 15px;">设为默认地址</el-checkbox>
      <el-button type="primary" size="small" @click="handlePreserve">保存</el-button>
      <el-button size="small" @click="handleDelete">删除</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getAddress } from 'api/common'
import { getOrder, addAddr, editAddr, delAddr, submitNow, getAddr } from 'api/shop'
export default {

  name: 'addrForm',
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      city: '',
      options1: [],
      options2: [],
      options3: [],
      dist1: '',
      dist2: '',
      dist3: ''
    };
  },
  created() {
    this.fetchAddress(1)
    const dis = this.form.district.split(',')
    if (dis.length === 3) {
      this.value1 = dis[0]
      this.value2 = dis[1]
      this.value3 = dis[2]
    }
  },
  methods: {
    fetchAddress(num, val = {}) {
      getAddress(val)
      .then(res => {
        this[`options${num}`] = res.city
      })
      .catch(err => console.log(err))
    },
    // 选择省，获取市
    handleChange1(val) {
      this.city = val
      this.dist1 = this.options1[this.options1.map(v => v.id).indexOf(val)].name
      this.fetchAddress(2, { city: val })
    },
    // 选择市，获取区
    handleChange2(val) {
      this.city = val
      this.dist2 = this.options2[this.options2.map(v => v.id).indexOf(val)].name
      this.fetchAddress(3, { city: val })
    },
    // 选择区
    handleChange3(val) {
      this.city = val
      this.dist3 = this.options3[this.options3.map(v => v.id).indexOf(val)].name
    },
    // 修改默认地址
    changeAddrDefault() {
      this.$emit('change', this.form)
    },
    // 保存编辑
    handlePreserve() {
      const { id, name, address, phone_no, is_default } = this.form
      if (this.value1 === '' || this.value2 === '' || this.value3 === '') {
        this.$message({
          message: '请选择收货地址',
          type: 'warning'
        })
        return false
      }
      if (id) {
        editAddr({
          aid: id,
          title: name + this.dist1,
          district: this.dist1 + ',' + this.dist2 + ',' + this.dist3, // this.dist1 + this.dist2 + this.dist3,
          address,
          phone_no,
          name,
          is_default: is_default ? 1 : 0
        })
        .then(res => {
          this.$emit('editfinish', this.form)
        })
        .catch(err => console.log(err))
      } else {
        addAddr({
          title: name + this.dist1,
          district: this.dist1 + ',' + this.dist2 + ',' + this.dist3, // this.dist1 + this.dist2 + this.dist3,
          address,
          phone_no,
          name
        })
        .then(res => {
          this.$emit('editfinish', this.form)
        })
        .catch(err => console.log(err))
      }
    },
    // 删除
    handleDelete() {
      delAddr({
        aid: this.form.id
      })
      .then(res => {
        this.$emit('editfinish', this.form)
      })
      .catch(err => {
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    }
  }
};
</script>

<style lang="css" scoped>
</style>